<!--
 * @Descripttion: 
 * @Version: 1.0
 * @Author: wcl
 * @Date: 2023-11-24 13:32:40
 * @LastEditors: wcl
 * @LastEditTime: 2023-11-24 14:26:39
-->
<template>
  <div>
    <a-modal
      v-model:open="modalOpen"
      title="选择品牌"
      width="50%"
      :footer="null"
    >
      <div class="content" v-if="originalData.length > 0">
        <a-space direction="vertical" style="width: 100%" :size="16">
          <a-input-search
            v-model:value="searchCondition"
            placeholder="输入商品名称关键词搜索"
            enter-button="搜索"
            size="large"
            @search="onSearch"
          />
          <div
            class="brand"
            v-for="(item, key, index) in brandListData"
            :key="index"
          >
            <div class="brand-left">
              <div class="brand-title">{{ key }}</div>
              <div class="brand-list">
                <div
                  class="brand-item"
                  v-for="ele in item"
                  :key="ele.id"
                  @click="handleChoose(ele)"
                >
                  <div><img class="img" :src="ele.coverPic" alt="" /></div>
                  <div class="name">{{ ele.name }}</div>
                </div>
              </div>
            </div>
          </div>
        </a-space>
      </div>
      <a-empty v-else description="暂无数据,请在'品牌管理'中关联"></a-empty>
    </a-modal>
  </div>
</template>
<script setup>
import { ref,nextTick } from "vue";
import { getBrandByTypeId } from "@/api/goodConfig";
const modalOpen = ref(false);
const typeIds = ref("");
const open = (typeId) => {
  typeIds.value = typeId;
  modalOpen.value = true;
  nextTick(() => {
    getBrandList({ typeId, page: 1, pageSize: 999 });
  })
};
const brandListData = ref([]);
const originalData = ref([])
const getBrandList = async (data) => {
  const res = await getBrandByTypeId(data);
  if (res.code === 200) {
    originalData.value = res.data.list
    const data = res.data.list.sort((a, b) =>
      a.firstLetter.localeCompare(b.firstLetter)
    );
    brandListData.value = Object.groupBy(
      data,
      ({ firstLetter }) => firstLetter
    );
  }
};
const emits = defineEmits(["chooseType"]);
function handleChoose(ele) {
  emits("chooseType", ele);
  modalOpen.value = false;
}
const searchCondition = ref(undefined);
const onSearch = () => {
  getBrandList({
    typeId: typeIds.value,
    page: 1,
    pageSize: 999,
    searchCondition: searchCondition.value,
  });
};
defineExpose({ modalOpen, open });
</script>
<style lang="less" scoped>
.gray {
  font-size: 14px;
  color: rgba(132, 132, 134, 1);
}
.content {
  max-height: 500px;
  overflow: auto;
}
.brand {
  &-title {
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    font-size: 20px;
    background: rgb(249, 249, 249);
  }
  &-list {
    display: block;
    .brand-item {
      display: flex;
      cursor: pointer;
      .img {
        width: 24px;
        height: 24px;
        border-radius: 50px;
      }
      .name {
        margin-left: 10px;
        display: flex;
      }
    }
  }
  &-right {
    cursor: pointer;
  }
}
</style>
